<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0;
            padding: 0;
            position: absolute;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
            display: inline-block; /* 修改为 inline-block 以正确显示 */
        }

        .ball {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 30px;
            z-index: 100;
        }
    </style>
</head>
<body>
<div id="Application">
    <div class="container" @mousemove="move($event)"> <!-- 修改事件监听器 -->
        <div class="ball" :style="{left: offsetX + 'px', top: offsetY + 'px'}"></div>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                offsetX: 100, // 初始化为 ball 的初始 left 值
                offsetY: 30  // 初始化为 ball 的初始 top 值
            }
        },
        methods: {
            move(event) {
                // 获取鼠标在容器内的相对坐标
                let x = event.offsetX;
                let y = event.offsetY;

                // 获取容器的宽度和高度
                let containerWidth = document.querySelector('.container').clientWidth;
                let containerHeight = document.querySelector('.container').clientHeight;

                // 获取球体的半径
                let ballRadius = 30;

                // 计算球体在容器内可移动的最大x坐标和最大y坐标
                let maxX = containerWidth - ballRadius;
                let maxY = containerHeight - ballRadius;

                // 更新球体的x坐标，确保不会移出容器边界且能合理跟随鼠标
                if (x >= 0 && x <= maxX) {
                    this.offsetX = x - ballRadius;
                } else if (x < 0) {
                    this.offsetX = 0;
                } else {
                    this.offsetX = maxX;
                }

                // 更新球体的y坐标，确保不会移出容器边界且能合理跟随鼠标
                if (y >= 0 && y <= maxY) {
                    this.offsetY = y - ballRadius;
                } else if (y < 0) {
                    this.offsetY = 0;
                } else {
                    this.offsetY = maxY;
                }
            }
        }
    }
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>
